<!DOCTYPE html>
<!-- saved from url=(0053)javascript:; -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <title>layout 管理界面大布局示例 - Layui</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes"> 
  <meta name="format-detection" content="telephone=no"> 
  <link rel="stylesheet" href="./css/layui.css" media="all"> 
  <style>
    /* 移动端 */
    @media screen and (max-width: 768px) {
      .layui-layout-admin .layui-layout-left,
      .layui-layout-admin .layui-body,
      .layui-layout-admin .layui-footer{left: 0;}
      .layui-layout-admin .layui-side{left: -300px;}
    }
  </style> 
 <link id="layuicss-laydate" rel="stylesheet" href="css/modules/laydate/default/laydate.css" media="all"><link id="layuicss-layer" rel="stylesheet" href="css/modules/layer/default/layer.css" media="all"><link id="layuicss-skincodecss" rel="stylesheet" href="css/modules/code.css" media="all"></head> 
 <!-- <body onload="window.open('login.html','_self')"> -->
 <body>
  <div class="layui-layout layui-layout-admin"> 
   <div class="layui-header"> 
    <div class="layui-logo layui-hide-xs layui-bg-black">
     JS整周实训
    </div> <!-- 头部区域（可配合layui 已有的水平导航） --> 
    <ul class="layui-nav layui-layout-left"> <!-- 移动端显示 --> 
     <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"> <i class="layui-icon layui-icon-spread-left"></i> </li> 
     <li class="layui-nav-item layui-hide-xs"><a href=" ">主页</a></li> 
     <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">空间</a></li> 
     <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">社区</a></li> 
     <li class="layui-nav-item"> <a href="javascript:;">分组<i class="layui-icon layui-icon-down layui-nav-more"></i></a> 
      <dl class="layui-nav-child"> 
       <dd>
        <a href="javascript:;">分组1</a>
       </dd> 
       <dd>
        <a href="javascript:;">分组2</a>
       </dd> 
       <dd>
        <a href="javascript:;">分组3</a>
       </dd> 
      </dl> </li> 
    </ul> 
    <ul class="layui-nav layui-layout-right"> 
     <li class="layui-nav-item layui-hide layui-show-md-inline-block"> <a href="javascript:;"> <img src="img/touxiang.jpg" class="layui-nav-img"> 管理员 <i class="layui-icon layui-icon-down layui-nav-more"></i></a> 
      <dl class="layui-nav-child"> 
       <dd>
        <a href=" ">你的简介</a>
       </dd> 
       <dd>
        <a href=" ">设置</a>
       </dd> 
       <dd>
        <a href="login.html">注销登陆</a>
       </dd> 
      </dl> </li> 
     <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect=""> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li> 
    </ul> 
   </div> 
   <div class="layui-side layui-bg-black"> 
    <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> 
     <ul class="layui-nav layui-nav-tree" lay-filter="test"> 
      <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">图表数据<i class="layui-icon layui-icon-down layui-nav-more"></i></a> 
       <dl class="layui-nav-child"> 
        <dd class="layui-this">
         <a href="index.html">Echarts案例</a>
        </dd> 
        <dd>
         <a id="btnAjax">表单</a>
        </dd>
        <dd>
         <a id="btnAjax2">menu 3</a>
        </dd> 
        <dd>
         <a>the links</a>
        </dd> 
       </dl> </li> 
      <li class="layui-nav-item"> <a href="javascript:;">menu group 2<i class="layui-icon layui-icon-down layui-nav-more"></i></a> 
       <dl class="layui-nav-child"> 
        <dd>
         <a href="javascript:;">list 1</a>
        </dd> 
        <dd>
         <a href="javascript:;">list 2</a>
        </dd> 
        <dd>
         <a href="javascript:;">超链接</a>
        </dd> 
       </dl> </li> 
      <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li> 
      <li class="layui-nav-item"><a href="javascript:;">the links</a></li> 
     <span class="layui-nav-bar" style="top: 55px; height: 0px; opacity: 0;"></span></ul> 
    </div> 
   </div> 
   <div class="layui-body"> <!-- 内容主体区域 --> 
    <div style="padding: 30px;">
      <div id="container" style="height: 480px;"></div>
      
              <script type="text/javascript" src="js/echarts.js"></script>
              <script type="text/javascript">
      var chartDom = document.getElementById('container');
      var myChart = echarts.init(chartDom);
      var option;
       
      option = {
        title: {
          text: 'Stacked Area Chart'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      
      myChart.setOption(option);
      
              </script> 
     <br>
     <br> 
     <blockquote class="layui-elem-quote layui-text"> 
      <ul> <!--<li>
            该页面只是简单的管理系统的界面基础布局示例，并不是一整套界面布局方案，您可以关注基于 layui 的通用型管理系统界面模板解决方案：
            <a href="/layuiadmin/" target="_blank" class="layui-btn">layuiAdmin</a>
          </li>--> 
       <li>JS整周实训 </li> 
      </ul> 
     </blockquote> 
	 <!-- <input type="button"  value="发送get_ajax请求" id='btnAjax'> -->
     <br>
     <br>
     <br> 
     <div class="layui-card layui-panel"> 
      <div class="layui-card-header">
        图表联动案例
      </div> 
      <div class="layui-card-body">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="width: 900px;height:600px;"></div>
            <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            
            // 指定图表的配置项和数据
            var option = {
                    legend: {},
                    tooltip: {
                        //trigger: 'axis',
                        showContent: false,
                    },
                    dataset: {
                        source: [
                            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                            ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                            ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                        ]
                    },
                    xAxis: {type: 'category', 
                            triggerEvent: true,
                            //axisPointer: {show:true}
                        },
                    yAxis: {gridIndex: 0},
                    grid: {top: '55%'},
                    series: [            {type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10},            {type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10},            {type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10},            {type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10},            {                type: 'pie',                id: 'pie',                radius: '30%',                center: ['50%', '25%'],
                            label: {
                                formatter: '{b}: {@[2012]} ({d}%)'
                            },
                            encode: {
                                itemName: 'product',
                                value: '2012',
                                tooltip: '2012'
                            }
                        }
                    ]
                };
            
            setTimeout(function () {
                myChart.on('mouseover',function(params){
            
                    if(params.componentType == "xAxis"){
                        var xAxisInfo = params.value;
                        myChart.setOption({
                            series: {
                                id: 'pie',
                                label: {
                                    formatter: '{b}: {@[' + xAxisInfo + ']} ({d}%)'
                                },
                                encode: {
                                    value: xAxisInfo,
                                    tooltip: xAxisInfo
                                }
                            }
                        });
                    }
                    if(params.componentType == "series" && params.seriesType == 'line'){
                        var xAxisInfo = params.value[0];
                        myChart.setOption({
                            series: {
                                id: 'pie',
                                label: {
                                    formatter: '{b}: {@[' + xAxisInfo + ']} ({d}%)'
                                },
                                encode: {
                                    value: xAxisInfo,
                                    tooltip: xAxisInfo
                                }
                            }
                        });
                    }
                    setTimeout(function(){
                        myChart.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 4,
                            dataIndex: params.seriesIndex
                        });
                    },300);         
                });
            
                myChart.on('mouseout',function(params){
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 4,
                        dataIndex: params.seriesIndex
                    });         
                });
            },0);
            
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            </script>
      </div> 
     </div> 
     <br>
     <br> 
    </div> 
   </div> 
   <div class="layui-footer"> <!-- 底部固定区域 --> 底部固定区域 
   </div> 
  </div> 
  <script src="js/layui.js" charset="utf-8"></script> 
  <script src="js/echarts.js"></script>
  <script>
//JS 
layui.use(['element', 'layer', 'util', 'form'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,form = layui.form
  ,$ = layui.$;
	
  
  //头部事件
  util.event('lay-header-event', {
    //左侧菜单事件
    menuLeft: function(othis){
      layer.msg('展开左侧菜单的操作', {icon: 0});
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,title: '更多'
        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
        ,area: ['260px', '100%']
        ,offset: 'rt' //右上角
        ,anim: 5
        ,shadeClose: true
        ,scrollbar: false
      });
    }
  });
  
});

	

// 绑定点击事件1
 	document.getElementById('btnAjax').onclick = function () {
 		// 发送ajax 请求 需要 五步
 		// 1.创建异步对象
 		var ajaxObj = new XMLHttpRequest();
 
 		// 2.设置请求的url等参数
 		// 参数1 请求的方法 参数2 请求的url
 		ajaxObj.open('get','test1.jsp');
 
 		// 3.发送请求
 		ajaxObj.send();
 
 		// 假设 有一个 接返回数据的 方法ajaxObj.get();
  		
 
 		// 4.注册事件
 		// onreadystatechange  状态改变就会调用
 		// 如果要在 数据完美请求回来的时候 才调用 我们需要手动的 写一些判断的逻辑
 		ajaxObj.onreadystatechange = function () {
 			// 为了保证 数据 完整回来,我们一般会判断 两个值
 			if (ajaxObj.readyState==4&&ajaxObj.status==200) {
 				// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
 				// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
 				console.log('数据完美的回来了');
 
 				// 数据是保存在 异步对象的 属性中
 				console.log(ajaxObj.responseText);
 
 				// 修改页面的显示
 				//document.querySelector('h1').innerHTML = ajaxObj.responseText;
 				//document.querySelector('.layui-card-body').innerHTML = ajaxObj.responseText;
 				document.querySelector('.layui-body').innerHTML = ajaxObj.responseText;
 				layui.form.render();
 			}
 			
 		}
 
 		
 	}




// 绑定点击事件2
 	document.getElementById('btnAjax2').onclick = function () {
 		// 发送ajax 请求 需要 五步
 		// 1.创建异步对象
 		var ajaxObj = new XMLHttpRequest();
 
 		// 2.设置请求的url等参数
 		// 参数1 请求的方法 参数2 请求的url
 		ajaxObj.open('get','test2.jsp');
 
 		// 3.发送请求
 		ajaxObj.send();
 
 		// 假设 有一个 接返回数据的 方法ajaxObj.get();
  		
 
 		// 4.注册事件
 		// onreadystatechange  状态改变就会调用
 		// 如果要在 数据完美请求回来的时候 才调用 我们需要手动的 写一些判断的逻辑
 		ajaxObj.onreadystatechange = function () { 
 			// 为了保证 数据 完整回来,我们一般会判断 两个值
 			if (ajaxObj.readyState==4&&ajaxObj.status==200) {
 				// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
 				// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
 				console.log('数据完美的回来了');
 
 				// 数据是保存在 异步对象的 属性中
 				console.log(ajaxObj.responseText);
 
 				// 修改页面的显示
 				//document.querySelector('h1').innerHTML = ajaxObj.responseText;
 				document.querySelector('.layui-body').innerHTML = ajaxObj.responseText;
 			}
 			
 		}
 
 		
 	}
 	



</script>  
</body></html>